<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
  <head>
    <title>My JSP 'car.jsp' starting page</title>
  </head>
  
  <body>
    
    <select id="car" onchange="sendAjax()">
    	<option>-- 请选择 汽车--</option>
    	<option value="bmw">宝马</option>
    	<option value="audi">奥迪</option>
    	<option value="benz">奔驰</option>
    </select>
    
    <select id="type">
    	<option>-- 请选择系列 --</option>
    </select>
    
    
    
    <script type="text/javascript">
    
    	var xmlHttp;
		function createxmlHttp(){
			if(window.ActiveXObject){
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}else{
				xmlHttp=new XMLHttpRequest();
			}
		}
		
		function sendAjax(){
			createxmlHttp();
			
			var name=document.getElementById("car").value;
			xmlHttp.onreadystatechange=callback;
			
			/*xmlHttp.open("POST", "ajax.jspx", true);
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.send("name="+name);*/
			
			xmlHttp.open("GET","car.jspx?name="+name,true);
			xmlHttp.send();
		}
		
		function callback(){
			if(xmlHttp.readyState == 4) {
				if(xmlHttp.status == 200) {
					var xml = xmlHttp.responseXML;				
					var types = xml.getElementsByTagName("recode");
					document.getElementById("type").options.length = 1;
					for(var i = 0;i < types.length;i++) {
						var myOption = new Option(types[i].childNodes[0].nodeValue,types[i].childNodes[0].nodeValue);
						document.getElementById("type").options.add(myOption);
					}				
				} else {
					alert("Ajax Error");
				}
			}
		}

	</script>
    
  </body>
</html>
